<template>
  <div class="head">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="tab">
        <van-icon name="arrow-left" size="48" @click="$router.go(-1)" />
        <p>心动专区</p>
        <van-icon name="question-o" size="48" />
      </div>
      <div class="tabEnd">
        <div class="tabEnd-box">
          <div class="tabEnd-boxS">
            <div class="tabEnd-one">
              <img src="@/assets/img/home/Home-img/za(1).png" alt="" />
              <img src="@/assets/img/home/Home-img/za(2).png" alt="" />
            </div>
            <div class="tabEnd-two">
              <p>满眼故事</p>
              <p>打赏 开心了</p>
              <p>扯闲诗意拍卖，小一洛洛最美</p>
            </div>
          </div>
          <div class="tabEnd-three">
            <img src="@/assets/img/home/Home-img/small1.png" alt="" />
            <span>4分钟前</span>
          </div>
        </div>

        <div class="tabEnd-box">
          <div class="tabEnd-boxS">
            <div class="tabEnd-one">
              <img src="@/assets/img/home/Home-img/za(1.1).png" alt="" />
              <img src="@/assets/img/home/Home-img/za(1.2).png" alt="" />
            </div>
            <div class="tabEnd-two">
              <p>满眼故事</p>
              <p>打赏 开心了</p>
              <p>扯闲诗意拍卖，小一洛洛最美</p>
            </div>
          </div>
          <div class="tabEnd-three">
            <img src="@/assets/img/home/Home-img/small2.png" alt="" />
            <span>4分钟前</span>
          </div>
        </div>

        <div class="tabEnd-box">
          <div class="tabEnd-boxS">
            <div class="tabEnd-one">
              <img src="@/assets/img/home/Home-img/za(2.1).png" alt="" />
              <img src="@/assets/img/home/Home-img/za(2.2).png" alt="" />
            </div>
            <div class="tabEnd-two">
              <p>满眼故事</p>
              <p>打赏 开心了</p>
              <p>扯闲诗意拍卖，小一洛洛最美</p>
            </div>
          </div>
          <div class="tabEnd-three">
            <img src="@/assets/img/home/Home-img/small3.png" alt="" />
            <span>4分钟前</span>
          </div>
        </div>

        <div class="tabEnd-box">
          <div class="tabEnd-boxS">
            <div class="tabEnd-one">
              <img src="@/assets/img/home/Home-img/za(3.1).png" alt="" />
              <img src="@/assets/img/home/Home-img/za(3.2).png" alt="" />
            </div>
            <div class="tabEnd-two">
              <p>满眼故事</p>
              <p>打赏 开心了</p>
              <p>扯闲诗意拍卖，小一洛洛最美</p>
            </div>
          </div>
          <div class="tabEnd-three">
            <img src="@/assets/img/home/Home-img/small4.png" alt="" />
            <span>4分钟前</span>
          </div>
        </div>

        <div class="tabEnd-box">
          <div class="tabEnd-boxS">
            <div class="tabEnd-one">
              <img src="@/assets/img/home/Home-img/za(2.1).png" alt="" />
              <img src="@/assets/img/home/Home-img/za(2.2).png" alt="" />
            </div>
            <div class="tabEnd-two">
              <p>满眼故事</p>
              <p>打赏 开心了</p>
              <p>扯闲诗意拍卖，小一洛洛最美</p>
            </div>
          </div>
          <div class="tabEnd-three">
            <img src="@/assets/img/home/Home-img/small3.png" alt="" />
            <span>4分钟前</span>
          </div>
        </div>

        <div class="tabEnd-box">
          <div class="tabEnd-boxS">
            <div class="tabEnd-one">
              <img src="@/assets/img/home/Home-img/za(2.1).png" alt="" />
              <img src="@/assets/img/home/Home-img/za(2.2).png" alt="" />
            </div>
            <div class="tabEnd-two">
              <p>满眼故事</p>
              <p>打赏 开心了</p>
              <p>扯闲诗意拍卖，小一洛洛最美</p>
            </div>
          </div>
          <div class="tabEnd-three">
            <img src="@/assets/img/home/Home-img/small3.png" alt="" />
            <span>4分钟前</span>
          </div>
        </div>

        <div class="tabEnd-box">
          <div class="tabEnd-boxS">
            <div class="tabEnd-one">
              <img src="@/assets/img/home/Home-img/za(2.1).png" alt="" />
              <img src="@/assets/img/home/Home-img/za(2.2).png" alt="" />
            </div>
            <div class="tabEnd-two">
              <p>满眼故事</p>
              <p>打赏 开心了</p>
              <p>扯闲诗意拍卖，小一洛洛最美</p>
            </div>
          </div>
          <div class="tabEnd-three">
            <img src="@/assets/img/home/Home-img/small3.png" alt="" />
            <span>4分钟前</span>
          </div>
        </div>

        <div class="tabEnd-box">
          <div class="tabEnd-boxS">
            <div class="tabEnd-one">
              <img src="@/assets/img/home/Home-img/za(2.1).png" alt="" />
              <img src="@/assets/img/home/Home-img/za(2.2).png" alt="" />
            </div>
            <div class="tabEnd-two">
              <p>满眼故事</p>
              <p>打赏 开心了</p>
              <p>扯闲诗意拍卖，小一洛洛最美</p>
            </div>
          </div>
          <div class="tabEnd-three">
            <img src="@/assets/img/home/Home-img/small3.png" alt="" />
            <span>4分钟前</span>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      List: [],
      isLoading: false,
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
  },
};
</script>

<style lang='scss' scoped>
.head {
  //心动专区
  .tab {
    width: 670px;
    margin: 80px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    p {
      font-size: 40px;
    }
  }
  //列表区
  .tabEnd {
    width: 670px;
    margin: 0 auto;
    //列表内容
    .tabEnd-box {
      width: 670px;
      height: 104px;
      margin-top: 46px;
      display: flex;
      justify-content: space-between;
      .tabEnd-boxS {
        display: flex;
        align-items: center;
        .tabEnd-one {
          margin-left: 30px;
          img {
            width: 88px;
            height: 88px;
            margin-left: -30px;
          }
        }
        .tabEnd-two {
          margin-left: 22px;
          display: flex;
          flex-direction: column;
          :nth-child(1) {
            width: 200px;
            font-size: 30px;
            color: #7d5aca;
          }
          :nth-child(2) {
            width: 200px;
            font-size: 30px;
            color: #7d5aca;
          }
          :nth-child(3) {
            width: 300px;
            font-size: 20px;
            color: #666666;
          }
        }
      }
      .tabEnd-three {
        display: flex;
        flex-direction: column;
        align-items: center;
        span {
          font-size: 20px;
          color: #666666;
        }
      }
    }
  }
}
</style>